<template>
  <el-container>
    <el-aside width="300px">
      <vxe-grid v-bind="codeManageLeftObj.gridOptions" v-on="codeManageLeftObj.gridEvents">
        <template #toolbar_buttons>
          <vxe-input v-model="codeManageLeftObj.searchName" placeholder="搜索"></vxe-input>
          <vxe-button status="primary">搜索</vxe-button>
        </template>
      </vxe-grid>
    </el-aside>
    <el-main>
      <vxe-grid ref="codeManageRighttObjGrid" v-bind="codeManageRighttObj.gridOptions"> </vxe-grid>
    </el-main>
  </el-container>
</template>
<script lang="ts">
  import { defineComponent, onMounted, reactive, ref } from 'vue';
  import CodeManagerApi from '@/api/elcker/authmanage/CodeManagerApi';
  import { VxeGridInstance } from 'vxe-table';
  export default defineComponent({
    setup() {
      const codeManageRighttObjGrid = ref({} as VxeGridInstance);
      const codeManageLeftObj = reactive({
        searchName: '',
        gridOptions: {
          height: 'auto',
          toolbarConfig: {
            perfect: false,
            refresh: false,
            print: false,
            zoom: false,
            custom: false,
            slots: {
              buttons: 'toolbar_buttons',
            },
          },
          columns: [
            { type: 'seq', width: 20 },
            { field: 'aaa001', title: '编码值', align: 'center' },
            { field: 'aaa002', title: '编码描述', align: 'center' },
          ],
          pagerConfig: {
            layouts: ['PrevPage', 'NextPage', 'Total'],
          },
          proxyConfig: {
            seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
            ajax: {
              // 接收 Promise
              query: ({ page }: any) => {
                const queryParams: any = {
                  searchText: codeManageLeftObj.searchName,
                  pageSize: page.pageSize,
                  currentPage: page.currentPage,
                };
                return CodeManagerApi.getCodeDatas(queryParams);
              },
            },
          },
        },
        gridEvents: {
          cellClick({ column }: any) {
            codeManageRighttObjGrid.value.commitProxy('reload');
          },
        },
      });
      const codeManageRighttObj = reactive({
        gridOptions: {
          height: 'auto',
          toolbarConfig: false,
          columns: [
            { type: 'seq', width: 20 },
            { field: 'aaa001', title: '编码值', align: 'center' },
            { field: 'aaa002', title: '编码描述', align: 'center' },
          ],
          pagerConfig: true,
          proxyConfig: {
            seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
            autoLoad: false,
            ajax: {
              // 接收 Promise
              query: ({ page }: any) => {
                const queryParams: any = {
                  searchText: codeManageLeftObj.searchName,
                  pageSize: page.pageSize,
                  currentPage: page.currentPage,
                };
                return CodeManagerApi.getCodeData(queryParams);
              },
            },
          },
        },
      });
      onMounted(() => {});
      return {
        codeManageLeftObj,
        codeManageRighttObj,
        codeManageRighttObjGrid,
      };
    },
  });
</script>
<style lang="less" scoped>
  .el-container {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #eee;
  }

  .el-aside {
    height: 100%;
    padding: 0;
    margin: 0;
    margin-right: 2px;
    color: #333;
    text-align: center;
    background-color: #fff;
  }

  .el-main {
    height: 100%;
    padding: 0;
    margin: 0;
    color: #333;
    text-align: center;
    background-color: #ffff;
  }
</style>
